<template>
  <transition
    enter-active-class="animate__animated animate__fadeInUp"
    leave-active-class="animate__animated animate__fadeOutDown"
  >
    <div class="playList" v-show="showList">
      <div class="mask" @touchmove.prevent @click="clickMask"></div>
      <div class="content">
        <div class="top">
          当前播放<span>({{ playList ? playList.name.length : "0" }})</span>
        </div>
        <div class="scroll" ref="scrollBox">
          <ul v-if="playList">
            <li
              v-for="(item, index) in playList.name"
              :key="index + item"
              :class="['item', { active: index == curIndex }]"
              @click="clickList(index)"
            >
              <div class="left">
                <span class="name">{{ item }}</span>
                <span class="artist">{{
                  playList.artists[index] | getArtists
                }}</span>
              </div>
              <div class="delete" @click.stop="$emit('deleteSong', index)"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
    };
  },
  props: {
    playList: Object,
    curIndex: Number,
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show(val) {
      this.showList = val;
      if (val) {
        this.$nextTick(() => {
          this.$refs.scrollBox.scrollTop = Math.max(
            0,
            (this.curIndex - 2) * 30
          );
        });
      }
    },
    showList(val) {
      // 阻止遮罩层下方滚动
      val
        ? document.body.classList.add("noScroll")
        : document.body.classList.remove("noScroll");
    },
  },
  filters: {
    getArtists(val) {
      if (!val) return "";
      return val.map((item) => item.name).join(" / ");
    },
  },
  methods: {
    clickMask() {
      this.$emit("closeList");
    },
    clickList(index) {
      this.$emit("closeList");
      if (index != this.curIndex) {
        this.$emit("clickPlayList", index);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.playList {
  animation-duration: 0.6s;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .mask {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .content {
    width: 88%;
    height: 300px;
    background: #fcfcfd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    position: absolute;
    z-index: 2;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    opacity: 0.95;
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-image: linear-gradient(
        rgba(0, 0, 0, 0.02) 10%,
        rgba(0, 0, 0, 0.01) 50%,
        rgba(0, 0, 0, 0.02) 90%,
        rgba(0, 0, 0, 0.01) 100%
      );
    }
    .top {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-size: 15px;
      font-weight: bold;
      position: relative;
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        height: 150%;
        width: 100%;
        background-image: linear-gradient(
          rgba(80, 160, 160, 0.06) 10%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      span {
        font-weight: normal;
        font-size: 12px;
        color: #888;
      }
    }
    .scroll {
      overflow-y: auto;
      ul {
        padding: 0 15px;
        padding-bottom: 20px;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 30px;
          padding-right: 5px;
          padding-left: 10px;
          &.active {
            background: #efefef;
            .left .name::before {
              content: "";
              display: inline-block;
              background: url(../assets/music_icon.png);
              background-size: 100%;
              width: 12px;
              height: 12px;
              margin-right: 5px;
              vertical-align: middle;
            }
          }
          .left {
            display: flex;
            width: 0;
            flex: 1;
            span {
              align-items: flex-end;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .name {
              display: block;
              font-size: 14px;
              font-family: 微软雅黑 Light;
              font-weight: bold;
              color: #555;
            }
            .artist {
              flex: 1;
              width: 0;
              display: block;
              font-size: 12px;
              transform: scale(0.7);
              transform-origin: bottom left;
              color: #aaa;
              margin-left: 5px;
            }
          }
          .delete {
            margin-left: 10px;
            width: 20px;
            height: 20px;
            background: url(../assets/close.png) no-repeat;
            background-position: center;
            background-size: 60%;
            opacity: 0.5;
          }
        }
      }
    }
  }
}
</style>

<style scoped>
.playList .content .scroll {
  height: calc(100% - 50px);
}
</style>